<template>
  <div class="cmt-container">
       <hr>
    <h3>发表评论</h3>
   
    <textarea placeholder="请输入要bb的内容(最多吐槽120字)" 
    maxlength="120" v-model="msg"></textarea>
   
   <mt-button type="primary" size="large" @click="postComment">提交</mt-button>

  <div class="cmt-list">
      <div class="cmt-item"  v-for="(item,i) in commentList" :key="item.add_time">
          <div class="cmt-title">
              第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time | dateFormat}}
          </div>
          <div class="cmt-body">
              {{item.content==="undefined" ? "此用户很懒,什么都没留下":item.content}}
          </div>
      </div>
  </div>

   <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>

  
  </div>
</template>
 
<script>
import{Toast} from 'mint-ui';
export default {
  name: "",
  data() {
    return {
        commentList:[],//评论数据
        pageIndex:1,//默认显示第一页数据
        msg:''//评论输入内容
    };
  },
  created(){
      this.getComments();
  },
  methods:{
     getComments(){
         this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex)
         .then(res=>{
             if(res.body.status===0){
                //  console.log(res.body);
            //    this.commentList=res.body.message
            //加载更多,应该把新旧数据合在一起
               this.commentList=this.commentList.concat(res.body.message)
             }else{
                 Toast('评论加载失败');
             }
         })

     },
     getMore(){//加载更多
         this.pageIndex ++;
         this.getComments();
     },
     postComment(){
         //校验是否为空
         if(this.msg.trim()===0){
          return Toast('输入内容不能为空')
         }
         //发表评论
         //参数1:请求的url地址
         //参数2:提交给服务器的数据对象{content:this.msg}
         //参数3:定义提交的时候,表单中数据的格式,{emulateJSON.:true}
         this.$http.post('api/postcomment/'+this.$route.params.id,{content:this.msg.trim()})
         .then(res=>{
             if(res.body.status===0){
               //1.拼接处一个评论对象
               var cmt={
                   user_name:"匿名用户",
                   add_time:Date.now(),
                   content:this.msg.trim()
               }
               this.commentList.unshift(cmt);
               this.msg="";
               Toast('评论已提交');
             }
         })
     }
  },
  props:["id"],
};
</script>
 
<style scoped lang = "scss">
.cmt-container{
    padding: 0 10px;
    h3{
        font-size: 18px;

    }
    textarea{
        font-size: 14px;
        margin: 0;
        height:  85px;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
                line-height: 40px;
             background-color: #ccc;
            }
            .cmt-body{
             text-indent: 2em;
            }
        }
    }
    
}
</style>